<template>
  <el-drawer
    :visible.sync="drawerVisible"
    direction="rtl"
    :append-to-body="true"
    :before-close="handleClose"
    size="50%"
  >
    <div class="log-drawer-title" slot="title">
      <span>{{ drawerTitle }}</span>
      <span>
        <el-input-number
          v-model="queryForm.line"
          :controls="false"
          type="number"
          :max="10000"
          :min="100"
          @keyup.enter="loadLoags"
        />
      </span>
      <span>
        <el-button type="primary" @click="clickLoadLogs">查询</el-button>
      </span>
      <span>
        <span>AUTO:</span>
        <span><EnabledSwitch :value.sync="startTiming" type="Boolean" /></span>
      </span>
    </div>
    <div class="log-container">
      <!-- 局部加载 -->
      <Loading :loading="loading" />
      <el-scrollbar ref="scrollbar">
        <div v-for="(item, index) in dockerLos" :key="index">
          {{ item }}
        </div>
      </el-scrollbar>
    </div>
  </el-drawer>
</template>
<script>
import EnabledSwitch from "@/components/EnabledSwitch/index.vue";
import Loading from "@/components/Loading/index.vue";

import { logs } from "@/api/linux/docker";

export default {
  name: "DockerLog",
  components: {
    EnabledSwitch,
    Loading,
  },
  props: {
    containerName: {
      type: String,
      default: () => "",
    },
    title: {
      type: String,
      default: () => "",
    },
    visible: {
      type: Boolean,
      default: () => false,
    },
  },
  computed: {
    drawerTitle: {
      get() {
        return this.title;
      },
    },
    drawerVisible: {
      get() {
        return this.visible;
      },
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (!val) return;
        this.loadLoags();

        // 开启定时刷新
        this.timingRefresh(true);
      },
    },
    setIntervalreRefresh(newValue, oldValue) {
      if (oldValue) {
        clearInterval(oldValue);
      }
    },
    startTiming: {
      handler(val) {
        this.timingRefresh(val);
      },
    },
  },
  data() {
    return {
      queryForm: {
        containerName: "",
        line: 100,
      },
      dockerLos: [],
      setIntervalreRefresh: null,
      startTiming: true,
      loading: false,
    };
  },
  methods: {
    // 按钮查询
    async clickLoadLogs() {
      this.loading = true;
      await this.loadLoags();
      this.loading = false;
    },

    //加载日志
    async loadLoags() {
      const { data } = await logs({
        containerName: this.containerName,
        line: this.queryForm.line,
      });
      this.dockerLos = data.log.split("\r\n");

      if (!this.drawerVisible) return;
      // 自动下滑到底部
      setTimeout(() => {
        this.scrollToBottom();
      }, 500);
    },

    // 定时刷新数据
    timingRefresh(start) {
      if (this.setIntervalreRefresh) {
        clearInterval(this.setIntervalreRefresh);
      }
      if (start && this.drawerVisible) {
        this.setIntervalreRefresh = setInterval(() => {
          this.loadLoags();
        }, 10000);
      }
    },

    scrollToBottom() {
      const scrollbar = this.$refs.scrollbar;
      if (scrollbar) {
        const scrollbarRef = scrollbar.$refs.wrap;
        if (scrollbarRef) {
          scrollbarRef.scrollTop = scrollbarRef.scrollHeight;
        }
      }
    },

    // 关闭
    handleClose() {
      this.dockerLos = [];
      this.startTiming = true
      this.timingRefresh(false);
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.log-drawer-title {
  font-weight: bold;

  & > span:nth-child(2) {
    margin-left: 150px;
  }

  & > span:nth-child(3) {
    margin-left: 10px;
  }

  & > span:nth-child(4) {
    margin-left: 50px;
    font-size: 20px;

    span:nth-child(2) {
      margin-left: 10px;
    }
  }
}

.log-container {
  margin-left: 5%;
  width: 90%;

  .el-scrollbar {
    height: calc(100vh - 150px);
    background-color: #303133;
    color: #ffffff;
    font-size: 12px;
  }
}
</style>
